<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title> 
    <script src="./rem.js"></script>  
</head>

<body>
    <header class="box"> 
        <p class="box1-1"> 
            < </p>
                <p class="box1-2">新居民档案</p>
                <p class="box1-1"></p>
    </header>
    <div class="box2">居民基本信息</div> 
    
    <div class="box3">
        <p class="box3-1">  
            <span class="box3-2">真实姓名   <span class="xing">*</span>   </span> 
            <input type="text" placeholder="请填写居民的真实姓名" class="input">
            <span class="nv"> </span>
        </p>
        <p class="box3-1"> <span class="box3-2">身份证号<span class="xing">*</span></span></span> <input type="text"
                placeholder="请填写居民的身份证号"> <span class="nv"> </span> </p>
        <p class="box3-1"> <span class="box3-2">性别<span class="xing">*</span></span></span> <input type="text"
                placeholder="请填写居民的性别"> <span class="nv"> > </span> </p>
        <p class="box3-1"> <span class="box3-2">出生日期<span class="xing">*</span></span></span> <input type="text"
                placeholder="请填写居民的出生日期"> <span class="nv"> > </span> </p>
        <p class="box3-1"> <span class="box3-2">手机号码<span class="xing">*</span></span></span> <input type="text"
                placeholder="居民登录账号，请正确填写"> <span class="nv"> </span></p> 
        <p class="box3-1"> <span class="box3-2">登录密码<span class="xing">*</span></span></span> <input type="text"
                placeholder="8位以上的数字和字母组合"> <span class="nv"> </span></p>
        <div class="box3-3"> <span class="box3-2">现居地</span> <input type="text" placeholder="请填写现居地"><span class="nv"> </span> </div> 
    </div>

    <div class="box4"> 
        <div class="box3-3"> <span class="box3-2">现居地</span> <input type="text" placeholder="点击选择居民标签"> 
            <span class="nv"> </span> </div>  
        <p></p> <br>
        <div class="box4-1">
                <div class="gao">高血压</div>
                <div class="gao">冠心病</div>
                <div class="gao">高血糖</div>
                <div class="gao">高血脂</div>
        </div>
        <div class="box4-1">
                <div class="gao">高血压</div>
                <div class="gao">冠心病</div>
                <div class="gao">高血糖</div>
                <div class="gao">高血脂</div>
        </div>

        <div class="box5">
            <p class="box3-1"> <span class="box3-2">关联家人<span class="xing">*</span></span></span> <input type="text"
                placeholder="请选择该居民家人的信息"> <span class="nv"> > </span> </p>
        </div>

        <div class="box6">
               <p>立即签约</p>
        </div>
        <div class="box7">
            <p ><button class="box7-1">下一步</button></p>
        </div>
    

</body> 
</html>
<style>

  *{
    padding: 0px;
    margin: 0px;
    box-sizing: border-box;
}
ul{
    list-style: none;
}
a{
    text-decoration: none;
}

body {
  max-width: 750px;
  min-width: 300px;
  font-size: 15px;
  margin: 0 auto;
}

    html {
        background-color: #f2f2f2;
    }
    .box5{
        width: 100%;
        background-color: white;
    }
    .box6{
        width: 100%;
        background-color: white;
        padding: 0 .1rem;
    }
    .box4-1{
        width: 100%;
        height: 2.5rem;
        background-color: white;
        display: flex;

    }
    .box7{
        width: 100%;
        background-color: white;
        height: 2rem;
        line-height: 2rem;
        text-align: center;
        position: fixed;
        bottom: 0px;
      
    }
    .box7-1{
        width: 95%;
        background-color: turquoise;
        color: white;
        border: 0px;
    }
    .gao {
        width: 17%;
        text-align: center;
        height: 2rem;
        line-height: 2rem;
        border: .01rem solid black;
        margin-right: .5rem;
        font-size: .15rem;
        border-radius: .3rem;
         
    } 
    .box {
        width: 100%; 
        display: flex;
        background-color: white; 
        font-size: .18rem;
    }

    .box1-1 {
        width: 10%;
        text-align: center;
        font-size: .15rem;

    }

    .box1-2 {
        width: 80%;
        text-align: center;
        font-size: .18rem;
    }

    .box2 {
        font-size: .2rem;
    }

    .xing {
        color: red;
        font-size: .15rem;
    }

    .box3 {
         width: 100%;
        background-color: white;
        padding: 0rem .1rem;
        padding-top: .05rem;
        margin-bottom: .1rem;
        font-size: .13rem;
    }
    input {
        width: 4rem;
        border: 0rem;
        width: 3rem;
        font-size: .13rem;  
    } 
    .box3-1 {
        width: 100%;
        background-color: white;
        padding-bottom: .02rem;
        border-bottom: .01rem solid #ddd;
        display: flex;
        justify-content: space-between;
        font-size: .13rem;
    }

     .box3-2{
         width: 4.5rem;
     }

    .box3-3 {
        display: flex;
        justify-content: space-between;
    } 

    .nv {
        width: 1rem;
        color: #ddd;
        text-align: right;
        font-size: .17rem;
    }

    .box4 {
        width: 100%; 
        height: 4rem; 
        padding: 0 .1rem;
        background-color: white;
        height: 2rem;
        padding-top: .05rem;
        font-size: .13rem;
    }


    
</style>